<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th colspan="4">关键字: <input type="text" id="sou" name="sou"></th>
    </tr>
    <tr>
        <th colspan="4">
            <label><input type="radio" name="i" id="one" value="showAllByBname" checked="checked"
                          onclick="change(this.value)">按书名查询</label>
            <label><input type="radio" name="i" id="two" value="showAllByAuthor"
                          onclick="change(this.value)">按作者查询</label>
            <label><input type="radio" name="i" id="three" value="showAllByPubl"
                          onclick="change(this.value)">按地方查询</label>
        </th>
    </tr>
    <tr>
        <th colspan="4">
            <input type="button" name="but" id="but" value="查询">
        </th>
    </tr>
    <tr>
        <th>序号</th>
        <th>频道</th>
        <th>作者</th>
        <th>地方</th>
    </tr>
    </thead>
    <tbody id="tb">

    </tbody>
</table>
</body>
<script>
    v = "showAllByBname";

    function change(obj) {
        v = obj;
    }

    $(function () {
        $("#but").click(function () {
            $.ajax({
                url: v,
                type: "POST",
                data: {"sou": $("#sou").val()},
                dataType: "json",
                success: function (data) {
                    var $tb = $("#tb").html("");
                    var str = "";
                    $(data).each(function (i, n) {
                        str += "<tr>" +
                            "<td>" + n.bid + "</td>" +
                            "<td>" + n.bname + "</td>" +
                            "<td>" + n.author + "</td>" +
                            "<td>" + n.publ + "</td>" +
                            "<tr>"
                    })
                    $tb.append(str)
                }
            })
        })
    })


</script>
</html>